<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<h:outputStylesheet library="bootstrap" name="css/bootstrap.min.css" />
	<h:outputScript library="bootstrap" name="js/bootstrap.js" />	
	<h:outputScript library="bootstrap" name="js/jquery.js" />
	<script type="text/javascript">
		function printHiddenValue() {			
			alert($("#userForm\\:hiddenId").val());
		}
	</script>
</h:head>
<h:body>
<h1>JSF 2 example</h1>
<h:form id="userForm">
	<table class="table table-bordered table-striped">
	<tr><td>
	Username : </td><td><h:inputText id="username" value="#{userBean.userName}" required="true" />	
	</td></tr>
	<tr><td>
	Password : </td><td><h:inputSecret value="#{userBean.password}" />
	</td></tr>
	<tr><td>
	Address : </td><td><h:inputTextarea value="#{userBean.address}" />
	</td></tr>
	<tr><td>Single checkbox</td>
	<td><h:selectBooleanCheckbox value="#{userBean.rememberMe}" /> Remember Me </td>
	</tr>
	<tr><td>Mutiple checkboxes:Hard-coded with "f:selectItem"</td>
	<td>
		<h:selectManyCheckbox value="#{userBean.favNumber1}">
		<f:selectItem itemValue="1" itemLabel="Number1 - 1" />
		<f:selectItem itemValue="2" itemLabel="Number1 - 2" />
		<f:selectItem itemValue="3" itemLabel="Number1 - 3" />
		<f:selectItem itemValue="4" itemLabel="Number1 - 4" />
		<f:selectItem itemValue="5" itemLabel="Number1 - 5" />
		</h:selectManyCheckbox>
	</td>
	</tr>
	
	<tr><td>Mutiple checkboxes:Generated by Array</td>
	<td>
		<h:selectManyCheckbox value="#{userBean.favNumber2}">
			<f:selectItems value="#{userBean.favNumber2Value}"/>
		</h:selectManyCheckbox>
	
	</td>
	</tr>	
	<tr><td>Mutiple checkboxes:Generated by Map</td>
		<td>
			<h:selectManyCheckbox value="#{userBean.favNumber3}">
				<f:selectItems value="#{userBean.favNumber3Value}"/>
			</h:selectManyCheckbox>
		</td>
	</tr>
	<tr><td>Mutiple checkboxes:Generated by Object with var</td></tr>
	
	
	
	<tr><td><h:inputHidden value="#{userBean.answer}" id="hiddenId" /></td>
	<td><h:commandButton type="button" value="Click me to show hidden value" styleClass="btn btn-info" onclick="printHiddenValue()" /> </td></tr>
	</table>
	<h:commandButton action="user" value="Submit" styleClass="btn btn-primary" />
	
</h:form>
</h:body>
</html>